<template>
  <div class="h-100 clearfix" id="userBig">
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="harderBox">
            <el-form-item label="品牌:">
              <el-select v-model="harderBox.unitList" :no-data-text="tiText1" filterable clearable placeholder="请选择">
                <el-option v-for="item in ppmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="类型:">
              <el-cascader v-model.trim="harderBox.roleList" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable class="zidainWidth"></el-cascader>
            </el-form-item>-->
            <el-form-item label="安装时间:">
              <el-date-picker
                v-model="harderBox.value1"
                :picker-options="pickerBeginDateBefore"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="harderBox.nameList" clearable prefix-icon="el-icon-search" placeholder="输入报废资产名称或设备IP" class="search_btn search_icon"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">搜索</el-button>
            </el-form-item>
            <!-- <el-form-item class="btns-box"><el-button type="primary" size="small" plain>导出</el-button> </el-form-item>
            <el-form-item class="btns-box"><el-button type="primary" size="small" plain @click="Dayin">打印</el-button> </el-form-item>-->
          </el-form>
          <!-- 表格 -->
          <el-table
            stripe
            border
            :data="rolelist"
            highlight-current-row
            id="printcontent2"
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
            v-loading="tableLoad"
            @sort-change="sortthiscolumn"
          >
            <!-- :default-sort="{ prop: 'CJSJ', order: 'descending' }" -->
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <el-table-column label="报废资产名称" min-width="150" prop="zcmc" sortable show-overflow-tooltip></el-table-column>
            <el-table-column label="资产类型" prop="zclxmc" min-width="150px" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}{{ scope.row.zclxmc }} </template>
            </el-table-column>
            <el-table-column label="安装地址" prop="ssjs" min-width="200px" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</template>
            </el-table-column>
            <el-table-column label="IP地址" prop="ip" min-width="150px">
              <template slot-scope="scope">{{ scope.row.ip === 'null' ? '' : scope.row.ip }}</template>
            </el-table-column>
            <el-table-column label="设备序列码" prop="sbxlh" min-width="150px"></el-table-column>
            <el-table-column label="所属厂家" prop="cjmc" min-width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column label="报废机构" prop="bfjgmc" min-width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column label="报废原因" prop="bfyy" min-width="200px" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="操作人" prop="updateBy" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="报废时间" prop="bfsj" width="150" sortable>
              <template slot-scope="scope">{{ scope.row.bfsj | dateFormat }}</template>
            </el-table-column>
            <el-table-column label="审批状态" prop="spzt" min-width="100px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.spzt === 1" type="success" size="medium">{{ '已通过' }}</el-tag>
                <el-tag v-else-if="scope.row.spzt === 2" size="medium">{{ '审批中' }}</el-tag>
                <el-tag v-else-if="scope.row.spzt === 3" type="danger" size="medium">{{ '未通过' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作人" prop="sprxm"></el-table-column>
            <el-table-column label="审批时间" prop="spsj" width="150">
              <template slot-scope="scope">{{ scope.row.spsj | dateFormat }}</template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <!-- <el-button type="primary" v-if="quanxianBtns.btn3" :disabled="this.gouXuanList.length > 0 ? false : true" @click="generateWorkOrder">生成工单</el-button>
              <el-button type="danger" v-if="quanxianBtns.btn4" :disabled="this.gouXuanList.length > 0 ? false : true" @click="delBtn">批量删除</el-button>-->
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUrl } from '../../utils/getUrl.js'
import { ziC } from '../../utils/allUrl.js'
// import { endLoading } from '../../utils/loading.js'
import treesBox from '@/components/treesBox/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  data: function () {
    return {
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      treesBox: {
        url: 'ZI_CHAN_BAO_FEI',
        GZKZ: false,
      }, // tree图的请求地址
      zicanOptions: [],
      ppmcOptions: [],
      harderBox: {
        nameList: '',
        unitList: '',
        roleList: '',
        value1: '',
      },
      rolelist: [], // 资产列表
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      xianQu: null, // 辖区搜索条件
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      tiText1: '暂无数据', // 品牌提示
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  components: { treesBox },
  created: function () {
    // 获取数据
    this.getzcList()
    // 获取品牌
    this.getPingpai()
    // 获取资产类型
    this.getzican()
  },
  methods: {
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.searchBtn(e.type)
      this.xianQu = e.type
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    getzcList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('userId', user.id)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}zcbf/list`, params)
      switch (res.code) {
        case '0000':
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取品牌
    async getPingpai() {
      const { data: res } = await this.$http.post(`${ziC}pp/list`)
      const arr = []
      if (res.code !== '0000') {
        this.ppmcOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.ppmc,
          }
          arr.push(k)
        })
        this.ppmcOptions = arr
      }
    },
    // 获取资产
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        return this.$message({
          type: 'error',
          message: '资产' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    searchBtn(val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { nameList, unitList, roleList, value1 } = this.harderBox
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SF', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CS', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('QX', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('XZJD', this.xianQu.label)
          }
        }
      }
      if (value1) {
        params.append('KSSJ', value1[0])
        params.append('JSSJ', value1[1])
      }
      params.append('userId', user.id)
      params.append('PP_ID', unitList)
      params.append('ZCMC_IP_XH', nameList)
      params.append('ZCLX_XJ', roleList[roleList.length - 1] || '')
      // params.append('M_', size)
      // params.append('N_', current)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    handleSizeChange(size) {
      this.currentPage = 1
      this.pageSize = size
      this.searchBtn()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.searchBtn()
    },
    Dayin: function () {
      // 判断iframe是否存在，不存在则创建iframe
      var iframe = document.getElementById('printIframe2')
      if (!iframe) {
        var el = document.getElementById('printcontent2')
        iframe = document.createElement('IFRAME')
        var doc = null
        iframe.setAttribute('id', 'printIframe2')
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        // 这里可以自定义样式
        // doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
        doc.write('<div>' + el.innerHTML + '</div>')
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe)
      }
    },
    handStart: function () {
      this.handStart = true
    },
  },
}
</script>
<style lang="scss" scoped>
.left_box {
  border-right: 1px solid #f0f0f0;
  .left_item {
    padding: 15px 5px;
    .el-radio-group {
      display: flex;
      .el-radio-button {
        width: 50%;
        height: 32px;
        line-height: 32px;
      }
    }
    .tree_box {
      margin-top: 10px;
      .usersNumber2 {
        display: flex;
        width: 135px;
        cursor: pointer;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        position: relative;
      }
      .usersNumber2:after {
        content: '...';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
      }
    }
  }
}
.search_btn {
  width: 250px;
}
// .right_box {
//   .right_item {
//     padding-top: 15px;
//     .btn_header {
//       height: 35px;
//       line-height: 34px;
//       margin-bottom: 15px;
//       > li:first-child {
//         margin-left: 0;
//       }
//       > li:last-child {
//         float: right;
//       }
//       > li {
//         float: left;
//         margin-left: 10px;
//         .max_btn2 {
//           height: 34px;
//           line-height: 32px;
//           padding: 0 12px;
//         }
//       }
//       .select {
//         > span {
//           font-weight: 600;
//           margin-right: 5px;
//         }
//         > .el-select {
//           width: 170px;
//         }
//         .zidainWidth {
//           width: 168px;
//           line-height: 0;
//         }
//       }
//     }
//     .el-table {
//       margin-top: 15px;
//       border: 1px solid #eaeaea;
//       border-bottom: 0;
//       .minImg {
//         margin-right: 5px;
//       }
//       .operation {
//         display: inline-block;
//         margin: 0 5px;
//         height: 10px;
//         border-left: 1.5px solid #b3b3b3;
//       }
//       .Btn_nan {
//         padding: 0;
//       }
//     }
//     .fooer_box {
//       height: 48px;
//       line-height: 47px;
//       padding: 0 15px;
//       box-sizing: border-box;
//       border-top: none;
//       border: 1px solid #eaeaea;
//       border-top: 0;
//       display: flex;
//       justify-content: space-between;
//       .el-pagination {
//         padding: 6px 5px;
//       }
//       .shoujiBtn {
//         height: 35px;
//       }
//       .bigBOx {
//         align-items: center;
//         display: flex;
//         .imgBox {
//           > img {
//             width: 13px;
//             height: 13px;
//             margin: 0 3px 0 25px;
//           }
//           > span {
//             color: #6d7278;
//           }
//         }
//       }
//     }
//     .test-speed1 {
//       width: 100%;
//       height: 40px;
//       line-height: 40px;
//       text-align: center;
//       font-size: 18px;
//       font-weight: 600;
//       background-color: pink;
//     }
//     .ping_box {
//       width: 100%;
//       height: 300px;
//       background-color: rgba(0, 0, 0, 0.8);
//       overflow: auto;
//       > li {
//         padding: 0 15px;
//         height: 30px;
//         line-height: 30px;
//         color: #f0f0f0;
//       }
//     }
//   }
//   .dialogTitle {
//     font-size: 15px;
//     font-weight: 600;
//     > em {
//       font-size: 12px;
//       color: #909399;
//       font-style: normal;
//       margin-left: 10px;
//     }
//   }
//   .input-with-select {
//     width: 50%;
//     .searchFZ_btn {
//       width: 40px;
//       padding: 10.5px;
//       margin: 0;
//       background-color: #f5f7fa;
//     }
//   }
//   .dropDown {
//     margin-top: 15px;
//     width: 840px;
//     height: 305px;
//     border: 1px solid #eaeaea;
//     overflow: auto;
//     > li {
//       height: 50px;
//       line-height: 50px;
//       padding: 0 20px;
//       border-bottom: 1px solid #eaeaea;
//     }
//   }
//   .Hostform {
//     margin-bottom: 15px;
//     .Hostselect {
//       width: 260px;
//     }
//   }
// }
</style>
